<template>
    <div v-loading="loading" element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg" class="wrap" :class="{ download: !fileUrl }">
        <img class="img" v-if="fileType === 'img' && fileUrl" :src="fileUrl" @click="handlerPreview" />
        <div class="file" v-else>
          <div class="icon_con">
            <i class="iconfont icon-file" v-if="fileType === 'file'" />
            <i class="iconfont icon-pdf" v-if="fileType === 'pdf'" />
            <i class="iconfont icon-xls" v-if="fileType === 'xls'" />
            <i class="iconfont icon-ppt" v-if="fileType === 'ppt'" />
            <i class="iconfont icon-txt" v-if="fileType === 'txt'" />
            <i class="iconfont icon-ai" v-if="fileType === 'ai'" />
            <i class="iconfont icon-doc" v-if="fileType === 'doc'" />
            <i class="iconfont icon-psd" v-if="fileType === 'psd'" />
            <i class="iconfont icon-img" v-if="fileType === 'img'" />
          </div>
          <div class="file_name ellipsis" @click="handlerDownFile" :alt="file.fileName">{{file.fileName}}</div>
          <div class="file_size">{{formatSize(file.fileSize)}}</div>
        </div>
        <div class="download_con" v-if="!fileUrl" @click="handlerDownLoad">
          <i class="iconfont icon-download" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue';
import { downloadRemoteFile, previewImg } from '/@/utils/webView';
import { LoadingSvg } from '/@/utils/loading';
import api from '/@/api/email/index';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';

const props = defineProps({
  file: {
    type: Object,
    default: '',
  },
});

const stores = useEmail(pinia);
const loading = ref(false);
const fileUrl = ref('');

const fileType = ref('file');

const IMAGE_TYPES = ['.png', '.jpg', '.jpeg', '.gif', '.svg'];

const handlerDownFile = () => {
  if (fileUrl.value) {
    // 下载文件
    downloadRemoteFile(props.file.fileUrl || fileUrl.value, props.file.fileName);
  }
};

const handlerPreview = () => {
  previewImg(props.file.fileUrl || fileUrl.value);
};

const handlerDownLoad = async () => {
  loading.value = true;
  const res = await api.email.download({
    account: stores.curAccount,
    annexId: props.file.id
  });

  if (res.code === 200) {
    fileUrl.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
    const { fileName } = props.file;
    console.log("props.file:", props.file)
    if (IMAGE_TYPES.some(str => fileName.endsWith(str))) {
      fileType.value = 'img';
    } else if (fileName.endsWith('.pdf')) {
      fileType.value = 'pdf';
    } else if (['doc', 'docx'].some(str => fileName.endsWith(str))) {
      fileType.value = 'doc';
    } else if (['xls', 'xlsx'].some(str => fileName.endsWith(str))) {
      fileType.value = 'xls';
    } else if (fileName.endsWith('.ppt')) {
      fileType.value = 'ppt';
    } else if (fileName.endsWith('.txt')) {
      fileType.value = 'txt';
    } else if (['eps', 'ai'].some(str => fileName.endsWith(str))) {
      fileType.value = 'ai';
    } else if (fileName.endsWith('.psd')) {
      fileType.value = 'psd';
    }

    fileUrl.value = props.file.fileUrl;
});

const formatSize = (kb:number) =>{
  if (kb <= 0) {
    return "0 B";
  }

  const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  const i = Math.floor(Math.log(kb) / Math.log(1024));
  return (kb / Math.pow(1024, i)).toFixed(2) + " " + units[i];
};

</script>
<style lang="scss" scoped>
.iconfont {
  font-size: 28px;
}

.wrap {
  margin-right: 10px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.img {
  width: 120px;
  height: 80px;
  object-fit: contain;
}

.file {
  width: 120px;
  height: 80px;
  background-color: #eee;
  padding: 10px;
}

.file_name {
  color: #293c4f;
  font-size: 12px;
  word-break: break-all;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
    color: #293c4f;
  }
}

.file_size {
  font-size: 12px;
  text-align: center;
}

.icon_con {
  text-align: center;
}

.download {
  &:hover {
    .download_con {
      display: block;
    }
  }
}

.download_con {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  background: #ccc;
  width: 100%;
  height: 100%;
  padding: 20px 40px;
}
</style>  
